<template>
  <div>
    <el-tooltip
      class="box-item"
      effect="light"
      :visible="toolipShow"
      :content="content"
      placement="top-start"
      ref="toolipRef"
    >
      <div @mouseenter="mouseenter" @mouseleave="toolipShow = false">
        <slot></slot>
      </div>
    </el-tooltip>
  </div>
</template>

<script setup>
const emit = defineEmits(['showToolip'])

const props = defineProps({
  content: {
    type: String,
    default: ''
  }
})

const toolipShow = ref(false)
const toolipRef = ref(null)
function mouseenter() {
  toolipShow.value = props.content ? true : false
}
</script>

<style lang="scss" scoped></style>
